<template>
  <div class="infinite-container" :style="topStyle">
    <mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"></mu-refresh-control>
    <mu-divider></mu-divider>
  <div  v-if="expressData.length > 0">
    <div class="express-card bgwhite mb10" v-for="v in expressData" :key="v.outTradeNo">
      <div style="display:flex">
      <mu-flexbox class="card-title">
        <mu-flexbox-item>订单号码</mu-flexbox-item>
        <mu-flexbox-item class="text-right t1">{{v.outTradeNo}}</mu-flexbox-item>
      </mu-flexbox>
      </div>

      <mu-divider></mu-divider>

      <section style="padding:0 8px;">
        <template v-for = "(detail, i) in v.expressDetails">
        <mu-flexbox class="express-item" :key="i" @click.native="view(detail)">
          <mu-flexbox-item :grow="2">
            <i class="iconfont icon-shunfeng" v-if = "detail.expressCcompany === '002'"></i>
            <i class="iconfont icon-EMS" v-else></i>
          </mu-flexbox-item>
          <mu-flexbox-item :grow="8">
             {{detail.postOrder}} 
          </mu-flexbox-item>
          <!-- <mu-flexbox-item :grow="2" class="text-right t1">
            
          </mu-flexbox-item> -->
        </mu-flexbox>
        <mu-divider :key="i"></mu-divider>
        </template>

        <mu-flexbox class="express-item">
          <mu-flexbox-item class="f12 t1">
            {{v.cancelStatus ? '已取消' : ''}}
          </mu-flexbox-item>
          <mu-flexbox-item class="text-right f12 t3">
            下单时间：{{v.orderTime}}
          </mu-flexbox-item>
        </mu-flexbox>
      </section>
      </div>
    </div>

    <div class="not-found" v-else>
      <div >暂无数据</div>
    </div>

  </div>
</template>

<script>
import {commonAjax, PLATFORM_PREFIX, ORG_ID} from '../../api/api'
export default {
  data () {
    return {
      person: JSON.parse(localStorage.person || '{}'),
      topStyle: 'top:50px;',
      refreshing: false,
      trigger: null,
      expressData: []
    }
  },
  mounted () {
    // for app
    let mpiId = this.person.mpiId
    if (this.$route.query.accessToken) {
      mpiId = this.$route.query.mpiId
      localStorage.accessToken = this.$route.query.accessToken
      this.$store.commit('UPDATE_HEADERSHOW', false)
      this.topStyle = 'top:0;'
    }
    this.trigger = this.$el
    this.$store.commit('UPDATE_TITLE', '我的快递')
    this.getExpress(mpiId)
  },
  beforeDestroy () {
  },
  methods: {
    getExpress (mpiId) {
      this.$store.commit('UPDATE_LOADING')
      commonAjax([mpiId, ORG_ID], `${PLATFORM_PREFIX}.diagnosisPayTradeService`, 'getExpress').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200 && res.data.body) {
          let body = res.data.body
          body.forEach(v => {
            if (v.expressDetails && v.expressDetails.length > 0 && v.expressDetails[0].cancelStatus === '1') {
              v.cancelStatus = true
            } else {
              v.cancelStatus = false
            }
          })
          this.expressData = body
        } else {
          this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
        }
      }).catch(err => {
        this.$store.commit('UPDATE_LOADING')
        console.log(err)
        if (this.$route.query.accessToken) {
          window.location.href = 'bgys://jsszyy/sendParams?invalidToken=true'
        }
      })
    },
    getExpressCompany (comCode) {
      let comCodeName = ''
      if (comCode === '001') {
        comCodeName = 'EMS'
      } else if (comCode === '002') {
        comCodeName = '顺丰速运'
      } else {
        comCodeName = '其他'
      }
      return comCodeName
    },
    view (detail) {
      localStorage.postDetail = JSON.stringify(detail)
      if (this.$route.query.accessToken) {
        this.$router.push('/setting/myexpress/' + detail.postOrder + '?accessToken=' + this.$route.query.accessToken)
      } else {
        this.$router.push('/setting/myexpress/' + detail.postOrder)
      }
    },
    refresh () {
      window.location.reload()
    }
  }
}
</script>

<style lang="less">
@import '../../common/css/vars.less';
.express-card {
  display: block;
  .card-title {
    padding:0 .8em;
    margin: .8em 0;
    border-left: 4px solid @color-primary;
  }
  .express-item {
    padding: 8px;
  }
}
</style>
